<template>
    <div class='slot-user-info-table'>
        <!--头操作-->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input type="text" v-model="serchRule" auto-complete="off" placeholder="请输入需要查询的姓名" >
                    <template slot="prepend">查  询</template>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button class="slot-btn-top" type="primary" size="small" @click="AddUser">新增</el-button>
            </el-col>
            <el-col :span="14">

            </el-col>
        </el-row>

        <!--table-->
        <el-table
                :data="tableData.filter(data => data.name.includes(serchRule)).slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe border class="user-table"
                :height="tableHeight" style="width: 100%;">
        <!--<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border class="user-table" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass">-->
            <el-table-column fixed type="index" label="*" sortable min-width="30"></el-table-column>
            <el-table-column fixed prop="name" label="姓名" sortable min-width="80"></el-table-column>
            <el-table-column prop="gender" label="性别" sortable :formatter="formatSex" min-width="80"></el-table-column>
            <el-table-column prop="username" label="账号" sortable min-width="150"></el-table-column>
            <el-table-column prop="address" label="地址" sortable min-width="220"></el-table-column>
            <el-table-column prop="birthday" label="出生日期" sortable  min-width="170"></el-table-column>
            <el-table-column prop="phone" label="手机号码" sortable min-width="130"></el-table-column>
            <el-table-column prop="wxNo" label="微信号" sortable min-width="150"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" sortable :formatter="formatTimestampToTime" min-width="170"></el-table-column>
            <el-table-column prop="remark" label="备注" sortable min-width="220"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="140">
                <template scope="scope">
                    <el-button @click="openRoles(scope.row)" type="text" size="small">角色</el-button>
                    <el-button @click="EditUser(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="DelUser(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页处理-->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"></el-pagination>

        <!-- 用户编辑  -->
        <el-dialog :title="dialogTitle" :visible.sync="isDialog" :model="dialogList" width="800px" :close-on-click-modal="false">
            <el-form label-position="right" label-width="100px" :model="dialogList">
                <el-form-item label="头像">
                    <el-upload
                            :multiple="true"
                            class="avatar-uploader"
                            :action="idCardPhotoUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            accept="image/jpeg,image/gif,image/png"
                            :before-upload="beforeAvatarUpload"><!-- scope.row.photo  -->
                        <img v-if="dialogList.photo" :src="dialogList.photo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--<el-input v-model="dialogList.photo" clearable></el-input>-->
                </el-form-item>
                <div :inline="true" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="dialogList.name" ></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="dialogList.gender" >
                            <el-option label="【空】" value=""></el-option>
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div :inline="true" class="demo-form-inline">
                    <el-form-item label="身份证号码">
                        <el-input v-model="dialogList.idNo" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker type="date" class="picker-date" v-model="dialogList.birthday"
                                         value-format="yyyy-MM-dd HH:mm:SS"
                                        style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </div>
                <div :inline="true" class="demo-form-inline">
                    <el-form-item label="手机号码">
                        <el-input v-model="dialogList.phone" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话">
                        <el-input v-model="dialogList.telephone" clearable></el-input>
                    </el-form-item>
                </div>
                <div :inline="true" class="demo-form-inline">
                    <el-form-item label="微信号">
                        <el-input v-model="dialogList.wxNo" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="QQ号">
                        <el-input v-model="dialogList.qqNo" clearable></el-input>
                    </el-form-item>
                </div>
                <div :inline="true" class="demo-form-inline">
                    <el-form-item label="用户名">
                        <el-input v-model="dialogList.username" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="dialogList.password" type="password" clearable show-password></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="地址">
                <el-input v-model="dialogList.address" clearable></el-input>
            </el-form-item>
                <el-form-item label="备注">
                    <el-input
                            type="textarea"
                            size="medium"
                            v-model="dialogList.remark">
                    </el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDialogList">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 角色授权 -->
        <el-dialog title="角色" :visible.sync="isRolesDialog" width="600px" top="50px" :close-on-click-modal="false">
            <el-form label-position="right" label-width="100px" :style="dialogRolesHeight">
                <el-form-item label="选择角色">
                    <el-select v-model="dialogRoleIds" multiple placeholder="请选择" >
                        <el-option
                                v-for="item in rolesData"
                                :key="item.id"
                                :label="item.role_name"
                                :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitRolesDialogList">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import api from 'plugins/axios/api.js';
import { error } from 'util';
   export default {
        data() {
            let tokenId = sessionStorage.getItem("tokenId");
            return {
                tokenId:tokenId,
                currentPage: 1,
                pagesize: 10,
                tableHeight: document.documentElement.clientHeight - 180,
                isDialog: false,
                dialogTitle: '',
                dialogList: {
                    address: "",
                    birthday: '',
                    createTime: '',
                    deptId: '',
                    gender: "",
                    id: '',
                    idNo: "",
                    menus: '',
                    name: "",
                    password: "",
                    phone: "",
                    photo: '',
                    postId: '',
                    qqNo: "",
                    remark: '',
                    roles: '',
                    telephone: '',
                    username: "",
                    wxNo: "",
                },
                tableData: [],
                isRolesDialog: false,
                userId:"",
                dialogRoleIds: [],
                rolesData:[],
                idCardPhotoUrl:api.idImgUpload(),
                dialogRolesHeight: {
                    height: (document.documentElement.clientHeight - 210) + 'px',
                    overflowY: 'auto'
                },
                serchRule:''
            }
        },
        created() {
            this.getData();
            this.getRolesData();
        },
        mounted() {

        },
        methods: {
            // 初始化 角色获取
            /*获取所有角色*/
            getData() {
                let _this = this;
                api.allUserPage().then(function (res) {
                    console.log(res)
                    if (res.statusCode === '200') {
                        _this.tableData = res.content.records;
                    } else {
                        _this.$message.error(res.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            /*分页查询数据*/
             getRolesData() {
                let _this = this;
                api.getAllRoles().then(function (res) {
                    console.log(res)
                    if (res.statusCode === '200') {
                        _this.rolesData = res.content;
                    } else {
                        _this.$message.error(res.desc);
                   }
               }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
             })
            },

            // 查询-新增
            // serchNeed() {
            //     let _this = this;
            //
            // },
            AddUser() {
                let _this = this;
                _this.isDialog = true;
                _this.dialogTitle = '添加用户';
                this. dialogList = {
                    address: "",
                    birthday: null,
                    createTime: null,
                    deptId: null,
                    gender: "",
                    id: null,
                    idNo: "",
                    menus: null,
                    name: "",
                    password: "",
                    phone: "",
                    photo: '',
                    postId: null,
                    qqNo: "",   
                    remark: '',
                    roles: null,
                    telephone: '',
                    username: "",
                    wxNo: "",
                }
            },

            // table内操作 角色-编辑-操作
            openRoles(row){
                let data = [];
                for (let i = 0;i<row.roles.length;i++){
                    data.push(parseInt(row.roles[i].id));
                }
                this.isRolesDialog = true;
                this.userId = row.id;
                this.dialogRoleIds = data;
            },
            EditUser( row) {
                let _this = this;
                _this.isDialog = true;
                _this.dialogTitle = '编辑用户';
                this. dialogList = {
                    address: row.address,
                    birthday: row.birthday,
                    createTime: row.createTime,
                    deptId: row.deptId,
                    gender: row.gender,
                    id: row.id,
                    idNo: row.idNo,
                    menus: row.menus,
                    name: row.name,
                    password: row.password,
                    phone: row.phone,
                    photo: row.photo,
                    postId: row.postId,
                    qqNo: row.qqNo,
                    remark: row.remark,
                    roles: row.roles,
                    telephone: row.telephone,
                    username: row.username,
                    wxNo: row.wxNo
                }
            },
            DelUser( row) {
                let _this = this;
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    _this.dialogTitle = '删除用户';
                    _this.dialogList.id = row.id;
                    _this.submitDialogList();
                }).catch(() => { });
            },

            // 角色授权确认
            submitRolesDialogList(){
                let _this = this;
                let dialogRoleIds =  _this.dialogRoleIds.join(',');
                let params = new URLSearchParams();
                params.append("roleIds",dialogRoleIds);
                api.getUsersRoles(params,_this.userId).then(function (res) {
                    console.log(res);
                    if (res.statusCode === '200') {
                        _this.isRolesDialog = false;
                        _this.getData();
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            //用户编辑确认-上传
            submitDialogList(){
                let _this = this;
                let _token = sessionStorage.getItem("tokenId");
                let url;
                if( _this.dialogTitle === '添加用户' ){
                    url="/adscm/system/user/saveOrUpdateUsersMsg";
                } else if(  _this.dialogTitle === '编辑用户'){
                    url="/adscm/system/user/saveOrUpdateUsersMsg";
                } 
                api.addUpdataUserInfo(url,_this.dialogList).then(res=> {
                    if (res.statusCode === '200') {
                        _this.getData();
                        _this.$message.success(res.desc);
                         this.isDialog=false;
                    } 
                },error=> {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            handleAvatarSuccess(response, file, fileList){
                this.dialogList.photo = response;
                console.log( this.dialogList.photo);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isGIF && !isPNG) {
                    this.$message.error('上传图片必须是JPG/GIF/PNG/格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return (isJPG || isGIF || isPNG) && isLt2M;

            },


            timestampToTime(timestamp) {
                let date = new Date(timestamp);
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                let s = (date.getMilliseconds() < 10 ? '0' + date.getMilliseconds() : date.getMilliseconds());
                return Y + M + D + h + m + s;
            },
            formatTimestampToTime(row, column, cellValue, index) {
                return cellValue ? this.timestampToTime(cellValue) : '';
            },
            handleSizeChange(size) {
                this.pagesize = size;
            },
            handleCurrentChange  (currentPage) {
                this.currentPage = currentPage;
            },
        },
        filters: {
        }
    }
</script>
<style  scope>
 @import "user.css";
</style>
<style lang="stylus" scoped>

</style>

